<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 800px;
				height: 20px;
				border-radius: 4px;
				margin: 100px auto;
				border: 2px solid green;
				position: relative;
			}

			#jinDuTiao {
				height: 20px;
				background: orange;
				border-radius: 4px;
				float: left;
			}

			#num {
				position: absolute;
				transform: translateY(-50%);
				top: 50%;
				left: 5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div id="jinDuTiao" style="width: 0px;"></div>
			<span id="num">0%</span>
		</div>
		<script type="text/javascript">
			var timer = setInterval(function() {
				//每执行一次定时器 进度条在原来基础上+10
				//获取原来的宽度
				var style = parseInt(jinDuTiao.style.width);
				//定义一个变量用原来的值 + 每次增加的值 
				var curStyle = style + 12;
				//当进度条宽度为800时 已经是最大值了 
				if (curStyle >= 800) {
					curStyle = 800;

					//当执行这个条件时 进度条已经为100%
					//定时器不需要在执行了
					//清除定时器 这里this 指向widow
					clearInterval(timer)
				}
				//在原来的基础上 + 增加的值，在赋值给 元素的宽度
				jinDuTiao.style.width = curStyle + 'px';
				//给数字的元素加上left，根据进度条的变化而变化
				num.style.left=curStyle+'px';
				num.innerHTML=((curStyle/800)*100).toFixed(2)+'%';

			},100)
		</script>
	</body>
</html>
